<template>
  <div :class="{'mobile-el-form': showMobilePage}" class="project-inner-info">
    <Title title="项目信息" style="margin-bottom: 10px;"/>
    <el-form class="customer-form lineHeight32 mb22" label-width="120px" label-position="right">
      <el-row :gutter="8" :class="{'dividing': !showMobilePage}" class="content">
        <el-col :span="8">
          <el-form-item label="项目名称:">
            <ToolTip :content="detailData.projectName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人:">
            <CheckUserInfo v-if="detailData.creatorId" :user-id="detailData.creatorId" :label="detailData.creator" />
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目总监:">
            <CheckUserInfo v-if="detailData.projectDirector" :user-id="detailData.projectDirectorId" :label="detailData.projectDirector" />
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目编号:">
            <ToolTip :content="detailData.projectNum" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="立项日期:">
            <span v-if="detailData.projectApprovalDate" class="overflow">{{ detailData.projectApprovalDate | format('YYYY/MM/DD') }}</span>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品牌名称:">
            <ToolTip :content="detailData.brandName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门:">
            <ToolTip :content="detailData.departmentName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结案日期:">
            <span v-if="detailData.finishDate" class="overflow">{{ detailData.finishDate | format('YYYY/MM/DD') }}</span>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签:">
            <TagSelect v-model="detailData.tag" mode="detail" />
          </el-form-item>
        </el-col>
        <el-col v-if="hasRouteAuth('crm:project:privacy')" :span="8">
          <el-form-item label="预计到款:">
            <div v-if="detailData.receivePay && detailData.receivePay.length > 0">
              <p v-for="(item, index) in detailData.receivePay" :key="index" class="text">
                {{ `第${index+1}期：${format(item.date, 'YYYY/MM/DD')}，${item.returnMoney || '--'}元` }}
              </p>
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col v-if="hasRouteAuth('crm:project:privacy')" :span="8">
          <el-form-item label="项目备注:">
            <ToolTip :content="detailData.projectRemark" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="执行人(商务侧):">
            <CheckUserInfo
              v-if="detailData.businessCooperationName"
              :user-list="detailData.businessCooperation"
              :multiple="detailData.businessCooperation.length > 1"
              :user-id="detailData.businessCooperation.length === 1?detailData.businessCooperation[0].id:null"
              :label="detailData.businessCooperation.length === 1?detailData.businessCooperation[0].userName:null"
            />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="执行人(资源侧):">
            <CheckUserInfo
              v-if="detailData.resourceCooperation"
              :user-list="detailData.resourceCooperation"
              :multiple="detailData.resourceCooperation.length > 1"
              :user-id="detailData.resourceCooperation.length === 1?detailData.resourceCooperation[0].id:null"
              :label="detailData.resourceCooperation.length === 1?detailData.resourceCooperation[0].userName:null"
            />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <Title v-if="clientInfoAuth" title="客户信息" style="margin-bottom: 10px"/>
    <el-form v-if="clientInfoAuth" class="customer-form lineHeight32" label-width="120px" label-position="right">
      <el-row :gutter="8" :class="{'dividing': !showMobilePage}" class="content">
        <el-col :span="8">
          <el-form-item label="客户名称:">
            <ToolTip :content="detailData.clientName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户联系人:">
            <div v-if="detailData.contactPerson" class="flex">
              <div>{{ detailData.contactPerson.name || '--' }}</div>
              <div style="margin: 0 3px;">/</div>
              <SecretText :is-tool-tip="false" :log-text="`项目订单${detailData.projectNum}的客户联系人`" :origin-text="detailData.contactPerson.tel" />
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户性质:">
            <span v-if="detailData.customerProperty || detailData.customerProperty === 0" class="overflow">{{ detailData.customerProperty|customerPropertyFilter }}</span>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户类型:">
            <div v-if="typeof detailData.clientType === 'number'">{{ detailData.clientType ? '公司' : '个人' }}</div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际客户名称:">
            <ToolTip :content="detailData.actualClient" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际客户联系人:">
            <div v-if="detailData.actualContactPerson" class="flex">
              <div>{{ detailData.actualContactPerson.name || '--' }}</div>
              <div style="margin: 0 3px;">/</div>
              <SecretText :is-tool-tip="false" :log-text="`项目订单${detailData.projectNum}的实际客户联系人`" :origin-text="detailData.actualContactPerson.tel" />
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属集团:">
            <ToolTip v-if="detailData.group" :content="detailData.group" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { format } from '@/filters/date';
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
import TagSelect from '@/components/Common/tagSelect';
export default {
  components: { Title, TagSelect },
  filters: { format,
    customerPropertyFilter(num) {
      const obj = {
        '0': '非直客', '1': '直客'
      };
      return obj[num.toString()];
    }
  },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    },
    clientInfoAuth() {
      return this.hasRouteAuth('crm:projectInfo:clientInfo') || this.isAdmin;
    }
  },
  methods: {
    hasRouteAuth,
    format
  }
};
</script>

<style lang="scss" scoped>
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}
.project-inner-info {
  &::v-deep {
    .dividing{
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(3n) {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
    .el-form-item__content{
      display: flex;
    }
    .el-form-item {
      margin-bottom: 0px;
      .el-form-item__label {
        color: #999;
      }
    }
  }
  .text {
    margin: 0;
  }
}
.mb22 {
  margin-bottom: 22px;
}
</style>
